<template>
  <epx-icon :label="label_" :face="face_" :icon="icon_" />
</template>
<script lang="ts" setup>
  import { computed, markRaw } from 'vue';
  import { Face, findByIndex, Icon, Row, faces } from '../elementUI';
  import EpxIcon from './EpxIcon.vue';
  import { Sensor } from '../core';

  const props = defineProps<{
    label?: string;
    face?: Face;
    icon?: Icon;
    icons?: string;
    labels?: string;
    sensor?: Sensor;
    row?: Row;
    value?: unknown;
  }>();

  const mapper = computed<{ icons: Array<Icon>; labels: Array<string>; faces: Array<Face> }>(
    () => ({
      icons: (props.icons || '').split(','),
      labels: (props.labels || '').split(','),
      faces
    })
  );

  const finder = markRaw<Record<'icons' | 'labels' | 'faces', 'icon' | 'label' | 'face'>>({
    faces: 'face',
    labels: 'label',
    icons: 'icon'
  });

  const getSwitch = (key: 'icons' | 'labels' | 'faces'): undefined | string => {
    const vs: Array<Icon | Face | string> = mapper.value[key];
    if (!props.sensor || props.row) return props[finder[key]];

    return findByIndex<Face | Icon | string>(vs, props.sensor, props.row);
  };

  const icon_ = computed<Icon>(() => getSwitch('icons') as Icon);
  const label_ = computed<string>(() => getSwitch('labels') as string);
  const face_ = computed<Face>(() => getSwitch('faces') as Face);
</script>
